<template>
	<view class="container">
		<view class="header">
			<view>
				<input type="text" name="" id="scancodeInput"
					style=" height:40px;border-radius:5px;font-size:18px; background-color: #fff;opacity: 1;"
					:focus="isFocus" @focus="onFocus" v-model="scanode" :readonly="isReadonly" ref="myInput">
				<text style="font-size:30rpx;color:#999">请先定位光标后扫码添加商品</text>
			</view>
		</view>
		<view style="height:80px"></view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="gui-flex">
					<view class="radio-box" @click="changeRadio(item)">
						<text class="gui-icons gui-icons-big" v-if="!item.checked">&#xe762;</text>
						<text class="gui-icons gui-icons-big" v-else style="color:#9e7e35">&#xe7f8;</text>
					</view>
					<view class="goods-box gui-flex">
						<view class="image">
							<gui-image :src="item.change_thumb" :width="150" @click="catchImage(item.change_thumb)"
								style="border-radius: 5px;"></gui-image>
						</view>
						<view class="goods-content">
							<view class="title">{{ item.title + (item.goods_options && item.goods_options[0] ? '【'+item.goods_options[0].title+'】' : '') }}</view>
							<view class="gui-color-gray">规格：{{ item.sku }}</view>
							<view class="gui-color-gray">条码：{{ item.product_sn }}</view>
							<view class="gui-color-gray">库存：{{ item.stock }}</view>
						</view>
					</view>
				</view>
				<view class="bottom gui-flex gui-border-t gui-space-between">
					<view class="gui-color-gray" style="line-height: 40px;">出库数量</view>
					<view>
						<uni-number-box style="width:100%" :min="0" v-model="item.input_stock"
							@change="changeNumberBox($event,item)" :max="1000000" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="total">共{{ type }}种 {{ total }}件</view>
			<view class="gui-text-center gui-bg-light footer-button" hover-class="gui-tap" @click="createConfirm"
				v-if="list.length>0">
				<text
					class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">开始出库</text>
			</view>
			<view class="gui-text-center gui-bg-gray footer-button" hover-class="gui-tap" v-else>
				<text class="gui-text  gui-footer-large-button-text gui-block-text gui-text-center"
					style="color:#999">开始出库</text>
			</view>
		</view>
		<view style="height:120rpx"></view>
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="select-box">
				<view class="select-box-close gui-icons" @click="closePopup">&#xe78a;</view>
				<view class="select-list">
					<view class="select-item gui-border-b" v-for="(item,index) in selectList" :key="index">
						<view class="title">商品名称：{{ item.title + (item.goods_options && item.goods_options[0] ? '【'+item.goods_options[0].title+'】' : '') }}</view>
						<view class="number">出库数量：{{ item.input_stock }}</view>
					</view>
				</view>
				<view class="gui-text-center gui-bg-light footer-button" hover-class="gui-tap" @click="create">
					<text
						class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				selectList: [],
				total: 0,
				type: 0,
				scanode: '',
				keyupEvent: null,
				isFocus: true,
				isLock: false,
				isReadonly: false
			}
		},
		onLoad() {


		},
		destroyed() {
			// this.keyupEvent.removeEventListener("keyup", this.keyup);
		},
		mounted() {
			this.keyupEvent = document.addEventListener('keyup', this.keyup);
			// this.setFocus();
			// document.addEventListener('click', () => {
			// 	this.setFocus();
			// });
			// console.log(this.$refs.myInput.valueSync)
		},
		methods: {
			getTitle(item){
				let title = item.title;
				if(item.goods_options){
					title+='【' + item.goods_options[0].title + '】'
				}
				return title;
			},
			keyup(e) {
				if (e.keyCode == '13') {
					this.getGoods();
				}

			},
			onBlur() {
				// this.isFocus = false;
				// this.$nextTick(() => {
				// 	this.isFocus = true;
				// 	this.scanode = ''
				// })
			},
			onFocus() {
				this.isReadonly = true
				setTimeout(() => {
					this.isReadonly = false
				}, 200)
			},
			setFocus() {
				this.isFocus = true
			},
			async getGoods() {
				try{
					if (this.isLock) {
						return false;
					}
					this.isLock = true;
					//alert(this.$refs.myInput.valueSync.substring(3))
					let res = await this.$http.post(
						`/admin/shop?route=plugin.store-cashier.store.admin.goods.goods-option-search`, {
							search: {
								"keyword": this.$refs.myInput.valueSync.substring(3),
								"except_supplier": 1
							}
						})
					if (res.data.data.length > 0) {
						res.data.data.forEach(item=>{
							item.checked = true;
							item.input_stock = 1
						})
					}
					
					//查找列表中是否存在该商品
					let goods = this.list.find(item => {
						return (item.option_product_sn || item.product_sn) === (res.data.data[0].option_product_sn || res.data.data[0].product_sn)
					})
					//防止传空字符串返回全部列表
					if (res.data.data.length > 1) {
						this.scanode = '';
						this.$refs.myInput.valueSync = '';
						this.isLock = false;
						return false;
					}
					if(res.data.data.length === 0){
						uni.showToast({
							title: '暂无此商品',
							icon: 'none'
						});
						this.scanode = '';
						this.$refs.myInput.valueSync = '';
						this.isLock = false;
						return false;
					}
					//如果没有扫过码添加进入列表
					if (!goods) {
						this.list = this.list.concat(res.data.data[0] || []);
					}else{
						goods.input_stock = (goods.input_stock || 1 )+1;
						// uni.showToast({
						// 	title: '商品已存在',
						// 	icon: 'none'
						// });
					}
					this.scanode = '';
					this.$refs.myInput.valueSync = '';
					this.isLock = false;
					this.setTotal();
				}catch(e){
					this.isLock = false;
				}
				
			},
			createConfirm() {
				this.selectList = [];
				this.list.forEach(item => {
					if (item.checked) {
						this.selectList.push(item)
					}
				})
				this.$refs.popup.open()
			},
			closePopup(){
				this.$refs.popup.close();
			},
			async create() {
				this.closePopup();
				if(this.selectList.length == 0){
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return false;
				}
				let message = uni.getStorageSync('message')
				let selected_list = [];
				this.list.forEach(item => {
					if (item.checked) {
						selected_list.push(item)
					}
				})
				let res = await this.$http.post(
					`/admin/shop?route=plugin.store-cashier.store.admin.goods-stock.stock-batch-create`, {
						selected_list: selected_list,
						option_type: 6,
						category:uni.getStorageSync('message').category,
						code: message.code, //PD+年月日时分秒
						remark: message.remark
					})
				if (res.result == 1) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					setTimeout(() => {
						this.toAdd()
					}, 2000)

				}
			},
			toAdd() {
				uni.navigateTo({
					url: `/pages/outbound/add`
				})
			},
			setTotal() {
				this.total = 0;
				this.type = 0;
				this.list.forEach(item => {
					if (item.checked) {
						this.type += 1;
						this.total += item.input_stock
					}

				})
			},
			changeNumberBox(e, item) {
				console.log(e)
				item.input_stock = e;
				this.setTotal()
			},
			//预览图片
			catchImage(url) {
				uni.previewImage({
					current: 0, // 当前显示图片的http链接
					urls: [url] // 需要预览的图片http链接列表
				})
			},
			changeRadio(item) {
				item.checked = !item.checked;
				this.setTotal()
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		.item {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 30rpx;
			font-size: 28rpx;

			.bottom {
				padding-top: 20rpx;
				margin-top: 20rpx;
			}

			.goods-box {
				margin-left: 20rpx;

				.goods-content {
					margin-left: 20rpx;
				}

				.title {
					font-weight: bold;
				}
			}

			.radio-box {}

		}
	}

	.footer {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 0 15rpx #eee;

		.total {
			font-weight: bold;
			margin-left: 30rpx;
			line-height: 80rpx;
		}

		.footer-button {
			width: 400rpx
		}
	}

	.gui-bg-light {
		background-color: #9e7e35;
	}

	.header {
		background-color: #fff;
		position: fixed;
		top: 40px;
		left: 0;
		width: 100%;
		z-index: 20;
		padding: 5px;
		text-align: center;
		box-shadow: 0 0 15rpx #eee;

		input {
			border: 1px solid #eee;
			width: 90%;
			margin: 0 auto;
		}
	}
	.select-box{
		height: 60vh;
		background-color: #fff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		position: relative;
		overflow: hidden;
		.select-box-close{
			font-size:25px;
			position: absolute;
			color:#999;
			right:10px;
			top:10px
		}
		.select-list {
			padding: 30rpx;
			margin-top: 60rpx;
			height:calc(100% - 130px);
			overflow-y:auto;
			.select-item {
				margin-bottom: 20rpx;
				padding:20rpx 0;
				.title{
					font-weight: 600px;
					color:#333
				}
				.number{
					margin-top: 10rpx;
					color:#999
				}
			}
		}
	}
	
</style>